<template>
  <el-descriptions
      class="margin-top"
      title="未交易完成的商品列表"
      :column="4"
      size="small"
      border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          商品名称
        </div>
      </template>
      {{ tableData[0].name }}
    </el-descriptions-item>
    <el-descriptions-item >
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          图片
        </div>
      </template>
      <img
        v-show="buyButtonFlag"
        :src="'data:image/png;base64,'+tableData[0].imgurl"
        class="image"
        />
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          商品类型
        </div>
      </template>
      {{ tableData[0].type }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          商品价格
        </div>
      </template>
      {{ tableData[0].price }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          商品描述
        </div>
      </template>
      {{ tableData[0].description }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          上架时间
        </div>
      </template>
      {{ tableData[0].supplyTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          状态
        </div>
      </template>
      {{ tableData[0].StrStatus }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          商品操作
        </div>
      </template>
      <el-button>冻结</el-button>
      <el-button>查看意向购买人</el-button>
      <el-button @click="dialogVisible = true">交易成功下架商品</el-button>
      <el-button @click="dialogVisible2 = true">交易失败重新上线商品</el-button>
    </el-descriptions-item>
  </el-descriptions>

  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
  >
    <span>请再次确认是否交易成功下架商品</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="removeGoods">
        确定</el-button
        >
      </span>
    </template>
  </el-dialog>

  <el-dialog
      v-model="dialogVisible2"
      title="Tips"
      width="30%"
  >
    <span>请再次确认是否交易失败重新上线商品</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="putawayGoods">
        确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ref} from "vue";
import request from "@/utils/request";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Goods",
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      buyButtonFlag: true,
      loading: ref(false),
      currentDate: new Date().toDateString(),
      tableData: [
        {
          imgurl:'',
        }
      ],
    }
  },
  created() {
    this.getGoodsInfo()
  },
  methods: {
    getGoodsInfo() {
      this.dialogVisible2 = false;
      request.get("http://localhost:8082/goods/getGoodsList").then(res => {
        if(res.flag){
          this.tableData = res.data.list;
          this.switchString(this.tableData[0].status);
          if (this.tableData[0].status != 0) {
            this.buyButtonFlag = false;
          } else {
            this.buyButtonFlag = true;
          }
          this.$message({
            type: 'success',
            message: res.msg
          })
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    removeGoods(){
      this.dialogVisible = false ;
      request.post("http://localhost:8081/goods/removeGoods?goodsId="+this.tableData.id).then(res =>{
        if(res.flag){
          this.$message({
            type: 'success',
            message: res.msg
          })
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    putawayGoods(){
      request.post("http://localhost:8081/goods/putawayGoods?goodsId="+this.tableData.id).then(res =>{
        if(res.flag){
          this.$message({
            type: 'success',
            message: res.msg
          })
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    switchString(status){
      if(status == 0){
        this.tableData[0].StrStatus = '未交易';
      }else if(status == 1){
        this.tableData[0].StrStatus = '交易中';
      }else if(status == 2){
        this.tableData[0].StrStatus = '冻结中';
      }else if(status == 3){
        this.tableData[0].StrStatus = '下架了';
      }
    }
  }
}
</script>

<style scoped>
.image {
  width: 50px;
  height: 50px;
}
</style>
